// index.js
// 获取应用实例
const util = require('../../utils/util.js')
const app = getApp()

Page({
  data: {
    time: 1,
    mTime: 300000,
    timeStr:"00:00",
    timer:null,
    cateArr:[
      {
        icon:"gongzuo",
        text:"工作"
      },
      {
        icon:"yuedu",
        text:"学习"
      },
      {
        icon:"sikao",
        text:"思考"
      },
      {
        icon:"xiezuo",
        text:"写作"
      },
      {
        icon:"yundong",
        text:"运动"
      },
      {
        icon:"yueduliang",
        text:"阅读"
      }
    ],
    activeCate:0,
    rate:"",
    clockShow:false, 
    clockHeight:0,
    okShow:false,
    pauseShow:true,
    continuecancelShow:false
  },
  // 事件处理函数
  bindViewTap() {
    
  },
  onLoad() {
    const res = wx.getSystemInfoSync();
    const rate = 750 / res.windowWidth;
    this.setData({
      rate : rate,
      clockHeight : rate * res.windowHeight +"rpx"
    })
    //console.log(rate)

    
  },
  onReady(){
    //this.drawBg()
    //this.drawActive()
  },
  sliderchange(e) {
    this.setData({
      time:  e.detail.value
    })
    console.log( e.detail.value)
  },
  selectCate(e){
    //console.log()
    this.setData({
      activeCate: e.currentTarget.dataset.index
    })
    
  },
  start(){
    this.setData({
      clockShow: true,
      mTime : this.data.time * 60 *1000,
      timeStr: parseInt(this.data.time)>=10 ? this.data.time+":00" :"0"+this.data.time+":00",
      pauseShow:true,
      continuecancelShow:false,
      okShow:false
    })

    this.drawBg()
    this.drawActive()
  },
  drawBg(){
    wx.createSelectorQuery()
    .select('#processBg')
    .fields({ 
      node: true, 
      size: true })
    .exec(this.initBg.bind(this))
  },
  drawActive(){
    wx.createSelectorQuery()
    .select('#processActive')
    .fields({ 
      node: true, 
      size: true })
    .exec(this.initActive.bind(this))
  },
  initBg(res){
    let lineWidth = 4 / this.data.rate ;
    const canvas = res[0].node 
    canvas.width = res[0].width 
    canvas.height = res[0].height 
    const ctx = canvas.getContext('2d')

    ctx.beginPath()
    ctx.lineWidth = lineWidth
    ctx.strokeStyle = "#000000"
    // 圆中心x坐标，y坐标，半径r，起始角度0，结束角度2 PI，顺时针false/逆时针ture
    ctx.arc( 200 / this.data.rate, 200 / this.data.rate, 200/this.data.rate - lineWidth , 0, 2*Math.PI, false);
    ctx.stroke();//对当前路径进行描边
  },
  initActive(res){
    let lineWidth = 4 / this.data.rate ;
    const canvas = res[0].node 
     
    //每隔1ms绘制一次圆形
    const timer = setInterval(()=>{
      let _time = this.data.time *60*1000;
      let angle = 1.5+2*(_time - this.data.mTime) / _time
      const currentTime = this.data.mTime-100
      this.setData({
        mTime: currentTime
      })

      if(angle < 3.5){
        this.countTime(currentTime);

        canvas.width = res[0].width 
        canvas.height = res[0].height 
        const ctx = canvas.getContext('2d')
        ctx.beginPath()
        ctx.lineWidth = lineWidth
        ctx.strokeStyle = "#ffffff"
        ctx.arc( 200 / this.data.rate, 200 / this.data.rate, 200/this.data.rate - lineWidth , 1.5*Math.PI, angle*Math.PI, false);
        ctx.stroke();//对当前路径进行描边
      }else{
        clearInterval(timer)

        //保存成功的记录到本地
        var logs = wx.getStorageSync('logs')||[];
      
        logs.unshift({
          data: util.formatTime(new Date),
          cate: this.data.activeCate,
          time: this.data.time
        })

        wx.setStorageSync('logs',logs)    
       
        this.setData({
          timeStr : "00:00",
          okShow:true,
          pauseShow:false,
          continuecancelShow:false
        })
      }
    },100)

    this.setData({
      timer:timer
    })
  },
  countTime(curTime){
    if(curTime % 1000 == 0){ //当前setInterval经过了整1s
      const time1 = curTime / 1000 ;//s
      const time2 = parseInt(time1/60); //m
      const time3 = (time1 - time2*60) >= 10 ?(time1-time2*60): '0'+(time1 - time2*60)
      const time4 = time2 >= 10 ? time2 :'0'+time2
      this.setData({
        timeStr : time4+":"+time3
      })
    }
    
  },
  pause(){
    clearInterval(this.data.timer)
    this.setData({
      pauseShow:false,
      continuecancelShow:true,
      okShow:false
    })
  },
  continue(){
    this.drawActive()
    this.setData({
      pauseShow:true,
      continuecancelShow:false,
      okShow:false
    })
  },
  back(){
    clearInterval(this.data.timer)
    this.setData({
      pauseShow:false,
      continuecancelShow:false,
      okShow:false,
      clockShow:false
    })
  },
  getUserInfo(e) {
    
  }
})
